<template>
    <div>
        <Search :queryParams="queryParams" @formCommHandler="formCommHandler" style="max-height:210px;overflow-y:auto;">
            <template #search_after>
                <slot name="search_after_son"></slot> 
            </template>
        </Search>
        <div :class="this.tableStyle === 2 ? 'pt10' : ''"></div>
        <div style="overflow:hidden;">
            <div :class="this.tableStyle === 2 ? 'leftTable' : ''">
                <div :class="space"></div>
                <edit-table v-bind="tableParams" ref="table" @selectionChange="tableSelect">
                    <template #table_before>
                        <slot name="table_before_son"></slot>
                    </template>
                    <template #table_after>
                        <slot name="table_after_son"></slot>
                    </template>  
                </edit-table>
            </div>
            <div :class="this.tableStyle === 2 ? 'rightTable' : ''">
                <button-render :buttonsData="buttonsChild" @formCommHandler="formCommHandler"></button-render>
                <edit-table v-bind="childTableParams" ref="childTable" @selectionChange="tableChildSelect">
                    <template #table_before>
                        <slot name="childTable_before_son"></slot>
                    </template>
                    <template #table_after>
                        <slot name="childTable_after_son"></slot>
                    </template>  
                </edit-table>
            </div>
        </div>
    </div>
</template>
<script>
import Search from '@/components/baseComponents/Search'
import EditTable from '@/components/baseComponents/EditTable'
import ButtonRender from '@/components/baseComponents/ButtonRender'
export default {
    name: 'ParentChildTemplate',
    props: {
        tableParams: {
            type: Object,
            default: ()=>{}
        },
        queryParams: {
            type: Object,
            default: ()=>{}
        },
        childTableParams: {
            type: Object,
            default: ()=>{}
        },
        buttonsChild: {
            type: Object,
            default: ()=>{}
        }
    },
    data() {
        return {
            initTableData: [],
            tableStyle: 1,
            widthTable:'pw100',
            space:'',
            selectData: [],
            childSelectData:[]
        }
    },
    components: {
        Search,
        EditTable,
        ButtonRender,
        EditTable
    },
    created() {
        
    },
    mounted() {   
        this.tableStyle = this.tableParams.tableStyle
        // this.widthTable = this.tableStyle === 2 ? 'pw50' : 'pw100'
        if(this.tableStyle === 2 && this.buttonsChild.length > 1){
            this.space = 'mt'
        }
        if(this.tableStyle !== 2){
            this.space = ''
        }
        const initData = this.childTableParams.tableData ? this.childTableParams.tableData : [];
        this.initTableData = [...initData]
        this.childTableParams.tableData = []   
        this.initTable()
    },
    methods: {
        initTable() {
            this.$refs['table'].query({})
        },
        formCommHandler(data) {
            let _this = this
            if(data.type == "search"){ //查询
                new Promise((resolve,reject)=>{
                    _this.$emit('formCommHandler', data)
                    resolve()
                }).then(()=>{
                    _this.$refs['table'].query(_this.queryParams.queryData);
                })
            }
            else{
                _this.$emit('formCommHandler', data)
            }
            
            if(data.type == "add"){ //新增
                let obj = JSON.parse(JSON.stringify(_this.tableParams.rowDataJson));
                if(obj){
                    _this.$refs.table.addRow(obj);
                }
            }
            if(data.type == "edit"){ //修改
                if(_this.selectData.length != 1){
                    _this.$alert('请有且只选择一条数据修改')
                    return
                }
                _this.$emit('editHandler$after',_this.selectData)
            }
            
            if(data.type == "save"){ //保存
                _this.$emit('saveHandler',_this.$refs.table.saveData)
            }
            
            if(data.type == "del"){ //删除
                new Promise((resolve,reject)=>{
                    _this.$emit('delHandler$before',_this.$refs.table.saveData)
                    resolve()
                }).then(() => {
                    _this.$refs.table.deleteRow()
                }).then(() => {
                    _this.$emit('delHandler$after',_this.$refs.table.saveData)
                })
            }

            /* 子表type:childAdd childSave childDel */

            if(data.type == "childAdd"){ //子项新增
                if(_this.selectData.length != 1){
                    _this.$alert('请有且只选择一条主表数据进行子项新增')
                    return
                }
                let obj = JSON.parse(JSON.stringify(_this.childTableParams.rowDataJson));
                if(obj){
                    _this.$refs.childTable.addRow(obj);
                }
                 _this.$emit('addHandler$after',_this.selectData)
            }
            
            if(data.type == "childSave"){ //子项保存
                _this.$emit('childSaveHandler',_this.$refs.childTable.saveData)
            }
            if(data.type == "childEdit"){ //子项修改
                if(_this.childSelectData.length != 1){
                    _this.$alert('请有且只选择一条子表数据进行修改')
                    return
                }
                _this.$emit('childEditHandler',_this.childSelectData)
            }
            if(data.type == "childDel"){ //子项删除 
                new Promise((resolve,reject)=>{
                    _this.$emit('childDelHandler$before',_this.childSelectData)
                    resolve()
                }).then(() => {
                    _this.$refs.childTable.deleteRow();
                }).then(() => {
                    _this.$emit('childDelHandler$after',_this.$refs.childTable.saveData)
                })
            }
            _this.$emit('formCommHandler', data)
        },
        tableChildSelect(row){
            this.childSelectData = row
        },
        tableSelect(row) {
            console.log(row)
            this.selectData = row
            let param = {}
            if(row.length > 0){
                // const id = this.tableParams["id"]
                // param = {id : row[row.length-1][id]}
                console.log(this.tableParams.id)
                let obj = {};
                obj[this.tableParams["id"]] = row[row.length-1][this.tableParams["id"]];
                param = obj
                console.log(param)
                this.childTableParams.tableData = JSON.parse(JSON.stringify(this.initTableData))
            }
            else {
                this.childTableParams.tableData = []
            }
            this.$refs['childTable'].query(param)
        }
    }
}
</script>
<style scoped>
    .leftTable{
        float:left;
        width:49%;
    }
    .rightTable{
        float:right;
        width:49%;
    }
    .mt{
        height:28px;
    }
    .pt10{
        padding-top:10px;
    }
</style>


